<template>
  <div>
    <van-skeleton title avatar :row="3" :loading="data.length == 0" />
    <van-skeleton title avatar :row="3" :loading="data.length == 0" />
    <van-skeleton title avatar :row="3" :loading="data.length == 0" />
    <van-skeleton title avatar :row="3" :loading="data.length == 0" />
    <van-skeleton title avatar :row="3" :loading="data.length == 0" />
    <van-skeleton title avatar :row="3" :loading="data.length == 0" />
    <template v-if="data.length > 0">
      <van-cell v-for="item in data" :key="item.filmId">
        <template #title>
          <div class="item" @click="$router.push('/film/' + item.filmId)">
            <div class="left">
              <img v-lazy="item.poster" />
            </div>
            <div class="middle">
              <div>{{ item.name }}</div>
              <div>
                <span>观众评分</span>
                <span>7.6</span>
              </div>
              <div>主演：闫非 彭安宇 宁浩 徐峥 陈思诚</div>
              <div>中国大陆 | 150分钟</div>
            </div>
            <div class="right">
              <span>购票</span>
            </div>
          </div>
        </template>
      </van-cell>
    </template>
  </div>
</template>

<script>
export default {
  props: ['data'],
}
</script>

<style lang="scss" scoped>
::v-deep.van-cell {
  padding: 0;
}
.item {
  margin-top: 15px;
  padding-bottom: 15px;
  display: flex;
  color: #797d82;
  font-size: 13px;
  border-bottom: 1px solid #ededed;

  .left {
    width: 77px;
    height: 100px;
    margin-left: 20px;
    img {
      width: 66px;
      height: 100%;
    }
  }

  .middle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;

    div:nth-of-type(1) {
      color: #191a1b;
      font-size: 16px;
    }

    div:nth-of-type(3) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .right {
    width: 15%;
    display: flex;
    align-items: center;
    margin-right: 20px;

    span {
      border: 1px solid #ff5f16;
      background: white;
      color: #ff5f16;
      border-radius: 2px;
      height: 25px;
      line-height: 25px;
      font-size: 13px;
      width: 50px;
      text-align: center;
    }
  }
}
</style>